<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Settings</title>
		<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
	</head>
	<body>
		<div class="navbar navbar-static-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">Project name</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li><a href="dashboard.html"><i class="icon-home icon-black"></i> Dashboard</a></li>
                    <li><a href="history.html"><i class="icon-time icon-black"></i> History</a></li>
                    <li><a href="tasks.html"><i class="icon-check icon-black"></i> Tasks</a></li>
                </ul>
                <div href="#" class="btn btn-success disabled" style="margin-left: 100px;">Balance: +354,33 &euro;</div>
                <div class="pull-right">
                    <a href="#add" role="button" class="btn btn-primary" data-toggle="modal">Add expense</a>
                    <div class="btn-group">
                        <a href="#" class="btn dropdown-toggle" data-toggle="dropdown">
                            Niko
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="settings.html"><i class="icon-cog icon-black"></i> Settings</a></li>
                            <li class="divider"></li>
                            <li><a href="login.html"><i class="icon-off icon-black"></i> Logout</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
		
<div id="add" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="addLabel">Add expense</h3>
    </div>
    <div class="modal-body">
    	<div id="alertikus2"></div>
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputDate">Date</label>
                <div class="controls">
                    <input type="text" id="inputDate" placeholder="DD.MM.YYYY">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputDescription">Description</label>
                <div class="controls">
                    <input type="text" id="inputDescription" placeholder="Description">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputCategory">Category</label>
                <div class="controls ui-widget">
                    <select id="inputCategory" placeholder="Category">
                        <option value=""></option>
                        <option value="Clothes">Clothes</option>
                        <option value="Rent">Rent</option>
                        <option value="Household">Household</option>
                        <option value="Leisure">Leisure</option>
                        <option value="Cat">Cat</option>
                        <option value="Car">Car</option>
                        <option value="Doctor">Doctor</option>
                        <option value="Medicine">Medicine</option>
                        <option value="Office Material">Office Material</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputAmount">Amount</label>
                <div class="controls">
                    <div class="btn-group" data-toggle="buttons-radio">
                        <button type="button" class="btn"><i class="icon-minus icon-black"></i></button>
                        <button type="button" class="btn"><i class="icon-plus icon-black"></i></button>
                    </div>
                    <input type="text" id="inputAmount" placeholder="Amount">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputRepeat">Repeat</label>
                <div class="controls">
                    <select id="inputRepeat">
                        <option>daily</option>
                        <option>weekly</option>
                        <option>monthly</option>
                        <option>annually</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Discard</button>
        <button id="saveandnew" class="btn btn-primary">Save changes and add new</button>
        <button id="saveonly" class="btn btn-primary" data-dismiss="modal">Save changes</button>
    </div>
</div>

		<div class="container">
    <div id="alertikus1"></div>
			<h2>Settings</h2>
			<form class="well">
				<legend>Change password</legend>
				<div class="control-group">
					<div class="controls controls-row">
						<input class="span4" type="text" placeholder="New password">
                        <input class="span4" type="password" placeholder="Repeat new password">
                        <button type="submit" class="btn btn-success span3">Save new password</button>
					</div>
				</div>
			</form>
			<form class="well">
				<legend>Change email address</legend>
				<div class="control-group">
					<div class="controls controls-row">
						<input class="span4" type="text" placeholder="New email address">
                        <input class="span4" type="password" placeholder="Repeat new email address">
                        <button type="submit" class="btn btn-success span3">Save new email address</button>
					</div>
				</div>
			</form>
			<form class="well">
				<legend>Set budget limit</legend>
				<div class="control-group">
                    <div class="controls controls-row">
                        <!-- <div class="input-prepend span4" style="margin-left: 0;">
                            <span class="add-on">&euro;</span>
                            <input type="text" style="width: 260px;" placeholder="Budget limit">
                        </div> -->
                        <input class="span4" type="password" placeholder="Budget limit">
						<select class="span4">
							<option>daily</option>
							<option>weekly</option>
							<option>monthly</option>
							<option>annually</option>
						</select>
                        <button type="submit" class="btn btn-success span3">Save new budget limit</button>
					</div>
				</div>
			</form>
		</div>

		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/chosen.jquery.min.js"></script>
	<script type="text/javascript">
    $(function() {
        $('#inputCategory').chosen();
    });
	</script>
	<script type="text/javascript">
	$('#add button').each(function(index) {
		$(this).click(function() {
			$('#add form')[0].reset();
		});
	});
	</script>
	<script type="text/javascript">
	$('#saveonly').click(function() {
		if (Math.random() > 0.5) {
			$('#alertikus1').html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Error!</strong> Unable to add expense. Please try again.</div>');
		} else {
			$('#alertikus1').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Success!</strong> Expense saved.</div>');
		}
	});
	$('#saveandnew').click(function() {
		if (Math.random() > 0.5) {
			$('#alertikus2').html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Error!</strong> Unable to add expense. Please try again.</div>');
		} else {
			$('#alertikus2').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Success!</strong> Expense saved.</div>');
		}
	});
	$('a[href="#add"]').click(function() {
		$('#alertikus1').html('');
		$('#alertikus2').html('');
	});
	</script>
	</body>
</html>